<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/user' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/user/info' }">个人信息</el-breadcrumb-item>
      <el-breadcrumb-item>用户信息</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
        <el-tab-pane label="信息修改" name="all">
          <el-descriptions title="基本信息" direction="vertical" :column="4" border>
            <template slot="extra">
              <el-button type="primary" size="medium" @click="dialogFormVisible = true; updateEmpInfoBtn()">修改
              </el-button>
            </template>
            <el-descriptions-item label="员工姓名" :span="2" :labelStyle="{'background': '#FDE2E2'}">
              {{ userInfo.empName }}
            </el-descriptions-item>
            <el-descriptions-item label="员工编号" :span="2" :labelStyle="{'background': '#E1F3D8'}">
              {{ userInfo.empId }}
            </el-descriptions-item>
            <el-descriptions-item label="手机号" :labelStyle="{'background': '#E1F3D8'}">
              {{ userInfo.phone }}
            </el-descriptions-item>
            <el-descriptions-item label="QQ">
              {{ userInfo.qq }}
            </el-descriptions-item>
            <el-descriptions-item label="微信" :labelStyle="{'background': '#FDE2E2'}">
              {{ userInfo.wechat }}
            </el-descriptions-item>
            <el-descriptions-item label="邮箱">
              {{ userInfo.email }}
            </el-descriptions-item>
            <el-descriptions-item label="学历">
              <el-tag size="small" :labelStyle="{'background': '#E1F3D8'}">
                {{ userInfo.edu }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="部门" :labelStyle="{'background': '#E1F3D8'}">
              {{ userInfo.depName }}
            </el-descriptions-item>
            <el-descriptions-item label="入职日期">
              {{ userInfo.hiredate }}
            </el-descriptions-item>
            <el-descriptions-item label="职位" :labelStyle="{'background': '#FDE2E2'}">
              <el-tag type="danger">{{ userInfo.positionName }}</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>

        <el-dialog title="信息修改" :visible.sync="dialogFormVisible" center>
          <el-form :model="empForm">
            <el-form-item label="员工姓名" :label-width="formLabelWidth">
              <el-input v-model="empForm.empName" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="员工编号" :label-width="formLabelWidth">
              <el-input v-model="empForm.empId" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="手机号" :label-width="formLabelWidth">
              <el-input v-model="empForm.phone" autocomplete="off" clearable></el-input>
            </el-form-item>
            <el-form-item label="QQ" :label-width="formLabelWidth">
              <el-input v-model="empForm.qq" autocomplete="off" clearable></el-input>
            </el-form-item>
            <el-form-item label="微信" :label-width="formLabelWidth">
              <el-input v-model="empForm.wechat" autocomplete="off" clearable></el-input>
            </el-form-item>
            <el-form-item label="邮箱" :label-width="formLabelWidth">
              <el-input v-model="empForm.email" autocomplete="off" clearable></el-input>
            </el-form-item>
            <el-form-item label="头像" :label-width="formLabelWidth">
              <el-upload class="upload-demo" :action="uploadUrl" :on-preview="handlePreview" :on-remove="handleRemove"
                         :on-success="handleSuccess" list-type="picture" :limit="1">
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateEmpInfo()">确 定</el-button>
          </div>
        </el-dialog>

        <el-dialog title="图片预览" :visible.sync="dialogImageVisible">
          <img :src="imageUrlPath" width="100%" height="100%"/>
        </el-dialog>

        <el-tab-pane label="查找用户" name="second">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-input placeholder="请输入要查找的员工姓名" v-model="empName">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
              </el-input>
            </el-col>
            <el-col :span="6">
              <el-button type="primary" @click="selectEmpInfo">查找</el-button>
            </el-col>
          </el-row>
          <div>
            <el-table :data="userList" border stripe>
              <el-table-column type="index" label="序号"></el-table-column>
              <el-table-column prop="empId" label="员工编号"></el-table-column>
              <el-table-column prop="empName" label="员工姓名"></el-table-column>
              <el-table-column prop="phone" label="电话"></el-table-column>
              <el-table-column prop="email" label="邮箱"></el-table-column>
              <el-table-column prop="qq" label="QQ"></el-table-column>
              <el-table-column prop="wechat" label="微信"></el-table-column>
              <el-table-column prop="edu" label="学历"></el-table-column>
              <el-table-column prop="empStatus" label="在职状态"
                               :formatter="taskStatusFormater"></el-table-column>
              <el-table-column prop="depName" label="所在部门"></el-table-column>
              <el-table-column prop="positionName" label="职位"></el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'all',
      empName: '',
      userList: [],
      userInfo: {},
      dialogFormVisible: false,
      formLabelWidth: '120px',
      empForm: {
        empName: '',
        empId: '',
        phone: '',
        qq: '',
        wechat: '',
        email: '',
        images: ''
      },
      uploadUrl: 'http://localhost:8093/user/file/empImagesUpload',
      imageUrlPath: '',
      dialogImageVisible: false,
      fileList: []
    }
  },
  methods: {
    // 选择标签
    handleClick(tab, event) {
    },

    async selectUserInfo() {
      const {data: result} = await this.$http.get('/user/selectOneself?empId='
        + this.$cookies.get("empId")).catch(function (e) {
        if (e.response.status === 500) {
          return this.$message.error("服务器错误")
        }
      })
      if (result.status === 200) {
        this.userInfo = result.data
      } else {
        return this.$message.error("查询失败")
      }
    },

    async updateEmpInfoBtn() {
      const {data: result} = await this.$http.get('/user/selectOneself?empId='
        + this.$cookies.get("empId")).catch(function (e) {
        if (e.response.status === 500) {
          return this.$message.error("服务器错误")
        }
      })
      if (result.status === 200) {
        this.empForm = result.data
      } else {
        return this.$message.error("查询失败")
      }
    },

    async handleRemove(file, fileList) {
      const {data: res} = await this.$http.delete("/user/file/deleteFile?key=" +
        this.empForm.images).catch(function (e) {
        alert(e)
      })
      if (res.status !== 200) return this.$message.error('删除图片失败')
      this.$message.success('删除图片成功')
    },
    handlePreview(file) {
      this.imageUrlPath = file.response.data.urlPath
      this.dialogImageVisible = true
    },
    handleSuccess(response, file) {
      if (response.status !== 200) return this.$message.error('文件上传失败')
      file.name = response.data.fileName
      // 获取虚拟路径
      this.empForm.images = response.data.urlPath
    },

    async updateEmpInfo() {
      const emp = {}
      emp.id = this.empForm.id
      emp.empId = this.empForm.empId
      emp.empName = this.empForm.empName
      emp.phone = this.empForm.phone
      emp.qq = this.empForm.qq
      emp.wechat = this.empForm.wechat
      emp.email = this.empForm.email
      emp.empPhoto = this.empForm.images
      const result = await this.$http.put('/user/updateOneselfInfo', emp)
        .catch(function (e) {
          if (e.response.status === 500) {
            alert("500")
          } else {
            alert("404")
          }
        })
      if (result.status !== 200) {
        return this.$message.error("修改个人信息失败")
      }
      await this.selectUserInfo()
      this.$message.success("修改成功")
      this.dialogFormVisible = false;
      this.empForm = {}
    },

    async selectEmpInfo() {
      const {data: result} = await this.$http.get('/user/selectEmpInfo/?name='
        + this.empName)
        .catch(function (e) {
          if (e.response.status === 500) {
            alert("服务器故障")
          }
        })
      if (result.status === 200) {
        this.userList = result.data
        return this.$message.success("查询成功")
      } else if (result.status === 201) {
        return this.$message.error(result.data)
      }
    },
    taskStatusFormater(row) {
      // console.log(row)
      switch (row.empStatus) {
        case true:
          return <el-tag type="success">在职</el-tag>
        case false:
          return <el-tag type="danger">离职</el-tag>
      }
    }
  },
  created() {
    this.selectUserInfo();
  }
}
</script>

<style lang="less" scoped>
.my-label {
  background: #E1F3D8;
}

.my-content {
  background: #FDE2E2;
}
</style>
